<template>
  <div class="tactical-review-container">
    <div class="page-header">
      <div class="header-content">
        <h2>漏洞信息管理</h2>
        <!-- <p>分析和回顾历史战术演练活动</p> -->
      </div>
      <div class="header-actions">
        <el-button type="primary" @click="generateReport" >
          <el-icon><Refresh /></el-icon>
          同步活体漏洞库
        </el-button>
        <el-button type="success" @click="handleCreate" >
          <el-icon><Plus /></el-icon>
          添加漏洞
        </el-button>
        <!-- <el-button type="primary" @click="generateReport" >
          <el-icon><TrendCharts /></el-icon>
          趋势分析
        </el-button>
        <el-button type="primary" @click="generateReport" >
          <el-icon><Download /></el-icon>
          导出数据
        </el-button> -->
        <!-- <el-button type="primary" @click="generateReport">
          <el-icon><Document /></el-icon>
          生成报告
        </el-button> -->
      </div>
    </div>

    <div class="stats-section">
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in dataTypes" :key="item.label">
          <el-card class="stat-card">
            <div class="stat-content">
              <div class="stat-label">{{ item.label }}</div>
              <div class="stat-number">{{ item.value }}</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div class="content-wrapper">
      <div class="filter-section">
        <el-form :model="filterForm" inline>
          <el-form-item label="CVE名称或漏洞名称">
            <el-input
              v-model="filterForm.name"
              placeholder="搜索CVE名称或漏洞名称"
              clearable
              @keyup.enter="handleSearch"
            />
          </el-form-item>
          <el-form-item label="严重程度">
            <el-select
              v-model="filterForm.severity"
              placeholder="请选择严重程度"
              clearable
            >
              <el-option label="严重" value="critical" />
              <el-option label="高危" value="high" />
              <el-option label="中危" value="medium" />
              <el-option label="低危" value="low" />
            </el-select>
          </el-form-item>
          <el-form-item label="系统">
            <el-select
              v-model="filterForm.severity"
              placeholder="请选择系统"
              clearable
            >
              <el-option label="Windows" value="Windows" />
              <el-option label="Linux" value="Linux" />
              <el-option label="SCADA" value="SCADA" />
              <el-option label="PLC" value="PLC" />
              <el-option label="网络设备" value="network" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="时间">
            <el-select
              v-model="filterForm.range"
              placeholder="请选择时间"
              clearable
            >
              <el-option label="今天" value="critical" />
              <el-option label="本周" value="high" />
              <el-option label="本月" value="medium" />
              <el-option label="本季度" value="medium" />
            </el-select>
          </el-form-item> -->
          <!-- <el-form-item label="时间范围">
            <el-date-picker
              v-model="filterForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="YYYY-MM-DD"
              @change="handleDateRangeChange"
            />
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="handleSearch">搜索</el-button>
            <el-button @click="resetFilter">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table-section">
        <el-table :data="vulnerabilityRecords" stripe>
          <el-table-column prop="cveId" label="CVE编号" width="150" />
          <el-table-column prop="title" label="漏洞标题" />
          <el-table-column prop="severity" label="严重程度" width="100">
            <template #default="{ row }">
              <el-tag :type="getSeverityType(row.severity)">{{
                row.severity
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="cvssScore" label="CVSS评分" width="100" />
          <el-table-column prop="affectedSystems" label="影响系统" width="250">
            <template #default="{ row }">
              <el-tag
                v-for="system in row.affectedSystems"
                :key="system"
                size="small"
                class="system-tag"
                >{{ system }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="publishDate" label="发布时间" width="120" />
          <el-table-column label="操作" width="150">
            <template #default="{ row }">
              <el-tooltip content="查看详情" placement="top" show-after="1000">
                <el-button type="primary" link @click="handleSee(row)">
                  <el-icon><View /></el-icon>
                </el-button>
              </el-tooltip>
              <el-tooltip content="编辑" placement="top" show-after="1000">
                <el-button type="primary" link @click="handleEdit(row)">
                  <el-icon><Edit /></el-icon>
                </el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top" show-after="1000">
                <el-button type="danger" link @click="handleDelete(row)">
                  <el-icon><Delete /></el-icon>
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

      <!-- 弹框 -->
    <el-dialog
      :title="viewDetail.title"
      v-model="viewDetail.open"
      width="800px"
      append-to-body
    >
      <Form
        v-if="viewDetail.open"
        :columns="viewDetail.columns"
        :data="viewDetail.form"
        :rules="viewDetail.rules"
        :inline="false"
        :disabled="viewDetail.disabled"
        :buttons="viewDetail.buttons"
        :key="viewDetail.disabled"
        height="390px"
        @submit="viewDetail.submit"
        @cancel="viewDetail.cancel"
      >
      </Form>
    </el-dialog>

  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  Refresh,
  Document,
  Plus,
  Trophy,
  SuccessFilled,
  UserFilled,
  StarFilled,
  TrendCharts,
  PieChart,
  Download,
} from "@element-plus/icons-vue";

const dataTypes = [
  { label: "漏洞总数", value: "342" },
  { label: "严重漏洞", value: "28" },
  { label: "高危漏洞", value: "76" },
  { label: "本月新增", value: "15" },
];
function getType(value) {
  if (value > 80) {
    return "success";
  } else if (value > 60) {
    return "warning";
  } else {
    return "danger";
  }
}
function getSeverityType(severity) {
  if (severity == "高危") {
    return "danger";
  } else if (severity == "严重") {
    return "warning";
  } else {
    return "success";
  }
}

// 模拟漏洞数据
const vulnerabilityRecords = ref([
  {
    id: 1,
    cveId: "CVE-2023-1234",
    title: "Modbus协议认证绕过漏洞",
    severity: "高危",
    cvssScore: "8.1",
    affectedSystems: ["PLC", "SCADA"],
    publishDate: "2023-03-15",
  },
  {
    id: 2,
    cveId: "CVE-2022-5678",
    title: "OPC UA服务器缓冲区溢出漏洞",
    severity: "严重",
    cvssScore: "9.8",
    affectedSystems: ["Windows", "SCADA"],
    publishDate: "2022-11-10",
  },
  {
    id: 3,
    cveId: "CVE-2021-9999",
    title: "HMI软件SQL注入漏洞",
    severity: "高危",
    cvssScore: "7.5",
    affectedSystems: ["Windows", "Web"],
    publishDate: "2021-08-20",
  },
]);

// 筛选表单
const filterForm = reactive({
  name: "",
  type: "",
});

const handleSearch = () => {
  pagination.page = 1;
  fetchData();
};

const resetFilter = () => {
  filterForm.name = "";
  filterForm.type = "";
  handleSearch();
};

// 方法
const generateReport = () => {
  ElMessage.success("正在生成战术回顾报告...");
};

const viewDetails = (row) => {
  ElMessage.info(`查看演练详情: ${row.name}`);
};

const viewReport = (row) => {
  ElMessage.info(`查看演练报告: ${row.name}`);
};

// 工具函数
const getTypeTagType = (type) => {
  const tagMap = {
    红蓝对抗: "danger",
    单兵作战: "success",
    系统协同: "warning",
  };
  return tagMap[type] || "info";
};

const getStatusTagType = (status) => {
  const tagMap = {
    已完成: "success",
    进行中: "warning",
    已取消: "info",
  };
  return tagMap[status] || "info";
};

// 列字段
const columns = ref([
  {
    prop: "cveId",
    label: "CVE编号",
    type: "input",
    width: "100%",
    formItemWidth: "100%",
  },
  {
    prop: "title",
    label: "漏洞标题",
    type: "input",
    width: "100%",
    formItemWidth: "100%",
  },
  {
    prop: "severity",
    label: "严重程度",
    type: "select",
    options:[
      {value:"严重", label:"严重"},
      {value:"高危", label:"高危"},
      {value:"中危", label:"中危"},
      {value:"低危", label:"低危"},
    ],
    width: "100%",
    formItemWidth: "100%",
  },  
   {
    prop: "cvssScore",
    label: "CVSS评分",
    type: "input",
    width: "100%",
    formItemWidth: "100%",
  },
  {
    prop: "affectedSystems",
    label: "影响系统",
    type: "checkbox",
    width: "100%",
    options:[
      {value:"PLC", label:"PLC"},
      {value:"SCADA", label:"SCADA"},
      {value:"Windows", label:"Windows"},
      {value:"Web", label:"Web"},
    ],
    formItemWidth: "100%",
  },
  {
    prop: "publishDate",
    label: "发布时间",
    type: "date",
    width: "100%",
    formItemWidth: "100%",
  },
]);
const handleCreate = () => {
  viewDetail.value.title = "创建";
  viewDetail.value.disabled = false;
  viewDetail.value.open = true;
  viewDetail.value.form = {};
  viewDetail.value.buttons = [
    { type: "default", text: "取消", prop: "cancel" },
    { type: "primary", text: "提交", prop: "submit" },
  ];
};

const handleSee = (row) => {
  viewDetail.value.title = "查看";
  viewDetail.value.disabled = true;
  viewDetail.value.open = true;
  viewDetail.value.form = row;
  viewDetail.value.buttons = [
    { type: "default", text: "取消", prop: "cancel" },
  ];
};
const handleEdit = (row) => {
  viewDetail.value.title = "编辑";
  viewDetail.value.disabled = false;
  viewDetail.value.open = true;
  viewDetail.value.form = row;
  viewDetail.value.buttons = [
    { type: "default", text: "取消", prop: "cancel" },
    { type: "primary", text: "提交", prop: "submit" },
  ];
};
const handleDelete = (row)=>{  
  ElMessageBox.confirm(`确认删除CVE编号"${row.cveId}"吗？此操作不可恢复。`, '删除确认', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'error'
  }).then(() => {
    const index = vulnerabilityRecords.value.findIndex(item => item.cveId === row.cveId)
    if (index > -1) {
      vulnerabilityRecords.value.splice(index, 1)
      pagination.total--
      ElMessage.success('删除成功')
    }
  })
}
const viewDetail = ref({
  title:"",
  open: false,
  disabled: false,
  form: {
    id: "",
    timeAppointment0: null,
    timeAppointment1: null,
    street: null,
    address: null,
    cusAddress: null,
    remark: null,
  },
  originData: {},
  columns: [
    {
      title: "",
      cols: columns.value,
    },
  ],
  rules: [],
  submit: (val) => {
    if (val.id) {
      ElMessage.success("编辑漏洞成功");
    } else {
      vulnerabilityRecords.value.push(val);
      ElMessage.success("添加漏洞成功");
    }

    viewDetail.value.open = false;
  },
  cancel: () => {
    viewDetail.value.open = false;
  },
  buttons: [
    { type: "primary", text: "保存", prop: "submit" },
    { type: "default", text: "取消", prop: "cancel" },
  ],
});
</script>

<style lang="scss" scoped>
.tactical-review-container {
  background-color: var(--bg-color);
}


  .header-content {
    h2 {
      margin: 0 0 8px 0;
      color: var(--text-color);
      font-size: 24px;
      font-weight: 600;
    }

    p {
      margin: 0;
      color: var(--text-color-secondary);
      font-size: 14px;
    }
  }


.stats-section {
  margin-bottom: 20px;

  .stat-card {
    .el-card__body {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px;
    }

    .stat-content {
      .stat-number {
        font-size: 32px;
        font-weight: bold;
        color: var(--text-color);
        line-height: 1;
        margin-bottom: 8px;
      }

      .stat-label {
        font-size: 14px;
        color: var(--text-color-secondary);
      }
    }

    .stat-icon {
      font-size: 48px;
      opacity: 0.8;
    }
  }
}

.chart-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;

  .chart-placeholder {
    text-align: center;
    color: var(--text-color-secondary);

    p {
      margin-top: 16px;
      font-size: 16px;
    }
  }
}

.recent-records {
  .el-table {
    margin-top: 20px;
  }
}

.summary-analysis {
  .analysis-content {
    h4 {
      color: var(--text-color);
      margin: 20px 0 12px 0;
      font-size: 16px;
      font-weight: 600;

      &:first-child {
        margin-top: 0;
      }
    }

    ul {
      margin: 0 0 20px 0;
      padding-left: 20px;

      li {
        color: var(--text-color-secondary);
        line-height: 1.6;
        margin-bottom: 8px;
      }
    }
  }
}
.system-tag {
  margin-right: 5px;
  margin-bottom: 5px;
}
</style>
